<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TrendLuv</title>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<!-- 	<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> -->
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.transit.min.js"></script>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


<!-- <script type="text/javascript" charset="utf-8" src="js/telephonenumber.js"></script> -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.rowImg {
	float: left;
	width: 50px;
	height: 60px;
	margin-left: 50px;
}

.rowTitle {
	float: left;
	height: 60px;
}

.sinalImg {
	height: 100px;
}

.sinalImg img {
	width: 90%;
}

.imgPerfil {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
#sinal_drop ul {
	padding:0px !important;
}

.panelPattern {
	border-radius:10px;
	background-color: white;
	width:80%;
	margin: auto;
	padding:10px;
	margin-top:2%;
}
#divLogin {
	display:none;
}
#divLogged {
	display:block;
}
#divSignIn {
	display:none;
}
</style>
</head>
<body style="background:#242424">
	<div id="divLogin" class="panelPattern" >
		<div style="margin:auto; width:80%;">
			<div style="border-right:1px solid gray; float:left; width:20px;">
				<span class="glyphicon glyphicon-lock"></span>
			</div>
			<div sytle="float:right; width:150px; text-align:center;">Login</div>
			<div style="border-right:1px solid gray; float:left; width:20px;">
				<span class="glyphicon glyphicon-lock"></span>
			</div>
			<div sytle="float:right; width:150px; text-align:center;"><a href="#" id="lnkSignIn">Cadastre-se</a></div>
		</div>
	</div>
	<div id="divSignIn" class="panelPattern">
		<label>Nome: 
		<input type="text"></label><br>
		<label>Usuario: <input type="text"></label> <br>
		<label>Senha: <input type="password"></label><br>
		<a id="lnkSignInConfirm" href="#" ><span class="glyphicon glyphicon-ok"></span></a>
		<a id="lnkCancelSingnIn" href="#" ><span class="glyphicon glyphicon-remove"></span></a>
	</div>
	<div id="divLogged">
		<nav class="navbar navbar-default" role="navigation"
			style="z-index:1000">
		<div class="container-fluid">
			<div style="float: left;">
				<a class="navbar-brand triggerSlideToggle" data-menu='slide'>
				<span class="glyphicon glyphicon-th-list"></span></a>
				<span class="navbar-brand" style="padding:0px; padding-top:10px">
					<img src="img/mini_logo.jpg" alt="Trend Luv">
				</span>
			</div>
			<div style="float: right;">
				<a class="navbar-brand triggerSlideToggle" data-menu='maps'
					style="border-right: 1px solid #ccc; font-size:1em;">Maps</a> <a
					class="navbar-brand triggerSlideToggle" data-menu='trend'
					style="border-right: 1px solid #ccc; font-size:1em;">Trends</a> <a
					class="navbar-brand triggerSlideToggle" data-menu='sinal'
					id="sinalContainer" style="float: right; font-size:1em;">Sinal</a>
			</div>
		</div>
		</nav>
		<div id="sinal_drop" class="dropedItens"
			style="right: 0px; height: 65%; width: 82px; z-index: 100;">
			<ul class="" style="list-style-type: none; text-align: center; margin-top:15px;">
				<li class="sinalImg"><img src="img/sinal_verd.png"></li>
				<li class="sinalImg"><img src="img/sinal_verme.png"></li>
				<li class="sinalImg"><img src="img/sinal_a.png"></li>
				<li class="sinalImg"><img src="img/sinal_c.png"></li>
			</ul>
		</div>
		<div id="slide_drop"  class="dropedItens"
			style="width: 35%; z-index: 100;">
			Foto Nome<br>
			<hr>
			Configurações
			<hr>
			Logout
			<br>
			<br>
		</div>
		<div id="trend_drop" class="dropedItens"
			style="width: 94%; margin-left: 3%; z-index: 99;">
			<!-- 	<div class="media"> -->
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">
						<a class="navbar-brand triggerSlideToggle" data-menu='chat'>Media heading1</a>
					</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-xheading">Media heading1</h4>
				</div>
			</div>
			<div class="row">
				<div class="rowImg">
					<img class="media-object" src="img/perfil.jpg" alt="foto"
						style="height: 30px">
				</div>
				<div class="rowTitle">
					<h4 class="media-heading">Media heading1</h4>
				</div>
			</div>
		</div>
		<div id="maps_drop" class="dropedItens"
			style="width: 94%; height: 92%; margin-left: 3%; z-index: 98;">
			<div id="map-container" style="width: 100%; height: 92%"></div>
		</div>
		<div id="chat_drop" class="dropedItens"
			style="width: 94%; z-index: 99; height:92%; margin-left:3%">
			<div style="width:90%; height:100%; margin:auto;">
				<div style="height:44px;" class="pull-right">
					<a class="navbar-brand triggerSlideToggle" data-menu='chat'>
						VOLTAR&nbsp;<span class="glyphicon glyphicon-circle-arrow-left"></span>
					</a>
				</div>
				<br><br><br>
				<div class="panel panel-default" style="width: 100%;">
					<div class="panel-body">Area do chat</div>
				</div>
				<div>
					<input type="text" id="msg" style="width: 90%;">&nbsp; <a
						href=""><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-md-4">
		  <div class="thumbnail">
		    <img data-src="holder.js/300x200" alt="300x200" src="img/avatar.jpg" style="width: 300px; height: 200px;" class="imgPerfil">
		    <div class="caption">
		      <h3>FULANO DOIDO</h3>
		      <p>Startup Weekend</p>
		      <p><a href="#" class="btn btn-default" role="button">Ativo</a></p>
		    </div>
		  </div>
		</div>
	</div>
	
</body>
</html>
<style>
.dropedItens {
	background-color: #f8f8f8;
	position: absolute;
	border: 1px solid #ccc;
	margin-top: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}

#sinal_drop ul {
	padding: 0px !important;
}
/* 	#sinal_drop li { */
/* 		height: 20px; */
/* 		min-height: 20px; */
/* 	} */
</style>
<script>
	var _controle = {
		menu:{
			'trend':{
				show:true,
				seletor:'#trend_drop'
			},
			'sinal':{
				show:true,
				seletor:'#sinal_drop'
			},
			'maps':{
				show:true,
				seletor:'#maps_drop'
			},
			'chat':{
				show:true,
				seletor:'#chat_drop'
			},
			'slide':{
				show:true,
				seletor:'#slide_drop'
			}
		}
	}

	$(function(){
	
		$('#lnkSignIn').click(function () {
		    $('#divLogin').hide();
		    $('#divSignIn').fadeIn('slow');
		});
				
		$('#lnkSignInConfirm').click(function () {
			var userJson = 
			'{ "User" : [ { "id":"10", "nome":"bill", "login":"bill", "senha":"123", "imagem":"img/avatars/bill.jpg", "status":"0", "idtrend":"1" }] }';
		});
		
		$('#lnkCancelSingnIn').click(function () {
		    $('#divSignIn').hide();
		    $('#divLogin').fadeIn('slow');
		});
		
		for(var i in _controle['menu']){
			var _menu = _controle['menu'][i];
			var _droped =  $(_menu.seletor);
			_droped.css('margin-top','-'+(_droped.height()+44)+'px');
		}
		
		$(".sinalImg").click(function(){
			$("#sinalContainer").html($(this).html());
		});
		$(".triggerSlideToggle").click(function(){
			var _menu = $(this).data('menu');
			var controle = _controle['menu'][_menu];
			var _uni = '';
			if( controle.show ){
				controle.show = false;
			}else{
				controle.show = true;
				_uni = '-';
			} 
			var _droped = $(controle.seletor);
			_droped.transition({ y: _uni + (_droped.height()+22)+'px'});			
		});

	});
	
	function initialize() {
		console.log('initialize');
		var map;
		var imgMarkerRed = 'img/ponteirovermelho.png';
		var imgMarkerYellow = 'img/ponteiroamarelo.png';
		var imgMarkerGreen = 'img/ponteiroverde.png';
		var latLangSeuBoteco = new google.maps.LatLng(-5.063930, -42.794116);
		var latLangCafeDelMar = new google.maps.LatLng(-5.077034, -42.780892);
		var latLangPinkElephant = new google.maps.LatLng(-5.077862, -42.781580);
		var latLangBudega = new google.maps.LatLng(-5.064152, -42.793854);
		var latLangBoteco = new google.maps.LatLng(-5.063800, -42.784666);

		var mapOptions = {
		   zoom: 12,
		   center: latLangSeuBoteco
		};
		
		map = new google.maps.Map(document.getElementById('map-container'),
		     mapOptions);
		     
		var markerSeuBoteco = new google.maps.Marker({
			position: latLangSeuBoteco,
			map: map,
			title: 'Seu Buteco',
			icon: imgMarkerRed
		});

		var markerCafeDelmar = new google.maps.Marker({
			position: latLangCafeDelMar,
			map: map,
			title: 'Cafe Del Mar',
			icon: imgMarkerYellow
		});

		var markerPinkElephant = new google.maps.Marker({
			position: latLangPinkElephant,
			map: map,
			title: 'Pink Elephant',
			icon: imgMarkerGreen
		});

		var markerBudega = new google.maps.Marker({
			position: latLangBudega,
			map: map,
			title: 'Budega',
			icon: imgMarkerRed
		});

		var markerBoteco = new google.maps.Marker({
			position: latLangBoteco,
			map: map,
			title: 'Boteco',
			icon: imgMarkerYellow
		});
	}	
	google.maps.event.addDomListener(window, 'load', initialize)	
	
	
	/*
	var tabContainer = $("#windows-container");
	var botaoNext = $("#btn-next");
	var botaoBack = $("#btn-back");
	var progInfo = $("#progresso_concluido");
	var progressBar = $("#progressBar");
	var photoContainer = '';
	var submitData = {position : {},address : {}};
		
	$(function(){
		
		$.fn.serializeFormJSON = function() {
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
		       if (o[this.name]) {
		           if (!o[this.name].push) {
		               o[this.name] = [o[this.name]];
		           }
		           o[this.name].push(this.value || '');
		       } else {
		           o[this.name] = this.value || '';
		       }
		   });
		   return o;
		};
	
		$(document).on('click','.select-option',function(){
			var _option = $(this);
			var input = _option.closest('.btn-group').find('input');
			input.val(_option.data('value'))
		});
		

		
		$(document).on('click','.select-option',function(){
			$option = $(this);
			$valor = $option.data('value');
			$option.closest('.btn-group').find('button > b').html($option.html());
			console.log($option.closest('.btn-group').find('button > b'));
		});
		
		$(document).on('click','#btn-next',function(){
			botaoBack.prop('disabled',false);
			var tabActiva = tabContainer.find('.active');
			var proxima = tabActiva.next();
			progInfo.html(proxima.data('proginfo'));
			progressBar.css('width',proxima.data('progbar')+'%');
			tabActiva.removeClass('active');
			proxima.addClass('active');
			console.log(proxima.length);
			if(proxima.next().length == 0){
				$(this).prop('disabled',true);
			}
		});
		
		$(document).on('click','#btn-back',function(){
			console.log("prev");
			botaoNext.prop('disabled',false);
			var tabActiva = tabContainer.find('.active');
			var anterior = tabActiva.prev();
			progInfo.html(anterior.data('proginfo'));
			progressBar.css('width',anterior.data('progbar')+'%');
			tabActiva.removeClass('active');
			anterior.addClass('active');
			if(anterior.prev().length == 0){
				$(this).prop('disabled',true);
			}
		});
		
		
		 /* position object attributes
		 alert('Latitude: '          + position.coords.latitude          + '\n' +
	          'Longitude: '         + position.coords.longitude         + '\n' +
	          'Altitude: '          + position.coords.altitude          + '\n' +
	          'Accuracy: '          + position.coords.accuracy          + '\n' +
	          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
	          'Heading: '           + position.coords.heading           + '\n' +
	          'Speed: '             + position.coords.speed             + '\n' +
	          'Timestamp: '         + position.timestamp                + '\n');
	      / 
		var onSuccessGetLocation = function(position) {
	      
	      
	          /*Adicionar a posicao lida do gps na variavel que vai ser enviada como parametro/
	          
	          submitData.position = position;
	          
	          $url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&sensor=false";
	         
	          var inputAddress = $('#locationContent');
	          
	          
	          $content = 	 'Latitude: '	+ position.coords.latitude          + '   '  +
		          			 'Longitude: '  + position.coords.longitude         + '\n' +
		          			 'Precisão: '   + position.coords.accuracy          + '\n';
		          			 
	          $.get($url,function( data ) {
	          	  //alert(JSON.stringify(data.results));
				  
				  $("#loading").hide();
				  
				  alert(data.results[0].formatted_address);
				  
				  $content = 'Endereço: ' + data.results[0].formatted_address	+ '\n' + $content;
				  submitData.address = data.results[0];
	  			  inputAddress.val($content);
		      }).fail(function() {
    			  alert( "error" );
  				  inputAddress.val($content); 
  			  });
  			  inputAddress.show();
		};
		
		
		
		function onErrorGetLocation(error) {
		    alert('code: '    + error.code    + '\n' +
		          'message: ' + error.message + '\n');
		}
		/**
			GPS_LOCATION
		/
		
		$(document).on('click','#getByLocation',function(){
		 	$("#loading").show();
			navigator.geolocation.getCurrentPosition(onSuccessGetLocation, onErrorGetLocation);
		});
		$(document).on('click','#putByHand',function(){
			$('#locationContent').show().focus();
		});
	});
	
    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value
  
	function makeCall(){
		 window.location.href = 'tel:192';
	}

    
	
    document.addEventListener("deviceready",onDeviceReady,false);
	
	function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    function onPhotoDataSuccess(imageURI) {
      var smallImage = document.getElementById('smallImage');
      smallImage.style.display = 'block';
      smallImage.src = imageURI;
      photoContainer = imageURI;
      //console.log(photoContainer);
      
      //smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    function capturePhoto() {
    //destinationType: destinationType.DATA_URL
      navigator.camera.getPicture(onPhotoDataSuccess,onFail, 
      	{ 
      		quality: 50,
      		correctOrientation: true,
      		destinationType: Camera.DestinationType.FILE_URI  
      	});
    }
  
    function sendSolicitation() {
	    
	    var options = new FileUploadOptions();
	    options.fileKey = "file";
	    var userid = '123456';
	    var imagefilename = userid + Number(new Date()) + ".jpg";
	    options.fileName = imagefilename;
	    options.mimeType = "image/jpg";
	
	
		/*
		var form = $('#form').serialize;
		{		
				{
		    		genero:0,
		    		ocular:0,
		    		verbal:0,
		    		motor:0,
		    		glasgow:0
	    		}
	    		
	    		{
		    		lng:-42.1674833,
		    		lat:-4.827281,
		    		info:"teste"
	    		}
	    		
	    		//form: new FormData(document.getElementById("form")),
	    		   conteudo = $("#form").serializeFormJSON();
	    		alert(conteudo);
	    		 var _form = eval('('+conteudo+')');
	    		  console.log(JSON.stringify(_form)); 
	    }/
	 
	    
	   
	   
	    options.params = {
	    	userid:1,
	    	imageURI:photoContainer,
	    	form: $("#form").serializeFormJSON(),
	    	posicao: submitData.position,
	    	info:{
	    		hora: getCurrentData(),
	    		endereco: submitData.address
	    	},
	    	chunkedMode:false
	    };
	    
	    var ft = new FileTransfer();
	    
	    ft.onprogress = function(progressEvent) {
			$('#progressBarUploadContainer').show();
			var progressbar = $('#progressBarUpload');
			
			if (progressEvent.lengthComputable) {
				var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
				progressbar.css('width',perc+'%');
			} else {
				if(statusDom.innerHTML == "") {
					progressbar.html("Loading");
				} else {
					progressbar.append(".");
				}
			}
		};
		
	    ft.upload(
	    	photoContainer,
	    	"http://10.28.55.9/samu/public/samu/painel/newocorrence",
	   		win, fail, options, true);
	   
	}
	
	

	function getCurrentData(){
		var agora = new Date();
	    var dd = agora.getDate();
	    var mm = agora.getMonth()+1; //January is 0!
	    var yyyy = agora.getFullYear();
	    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} 
	    return dd+'/'+mm+'/'+yyyy;
	}
	function win(r) {
		//alert(JSON.stringify(r.response['sucesso']));
		var response = eval('('+r.response+')');		 
		if(response.sucesso){
			$('#progressBarUploadContainer').hide();
			$('#sucessoInfo').show();
		}else{
			$('#progressBarUploadContainer').hide();
			//alert(JSON.stringify(r));
			$('#errorInfo').show();
		}
		alert(JSON.stringify(r));
	    //alert("Image uploaded successfully!!");
	    
	}

	function fail(error) {
		alert(JSON.stringfy(error));
	    //alert("There was an error uploading image");
	}

	function onFail(message) {
	    //alert('Failed because: ' + message);
	}
			
			*/
</script>
